<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        /* 留言板整体样式 */
        #message-board {
        width: 400px;
        margin: 0 auto;
        border: 1px solid #ccc;
        padding: 20px;
        }

        /* 留言列表样式 */
        #message-list {
        list-style-type: none;
        padding: 0;
        }

        /* 单个留言样式 */
        .message-item {
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
        }

        /* 留言输入框样式 */
        textarea {
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
        }

        /* 提交按钮样式 */
        button {
        background-color: #007BFF;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="message-board">
        <h2>留言板</h2>
        <ul id="message-list">
        </ul>
        <textarea id="message-input" placeholder="请输入留言"></textarea>
        <button id="submit-button">提交留言</button>
      </div>
    
      <script>
        // 获取提交按钮和留言输入框元素
        const submitButton = document.getElementById('submit-button');
        const messageInput = document.getElementById('message-input');
        const messageList = document.getElementById('message-list');
    
        // 提交留言的函数
        function submitMessage() {
          const messageText = messageInput.value;
          if (messageText.trim()!== '') {
            // 创建新的留言元素
            const newMessage = document.createElement('li');
            newMessage.className = "message-item";
            newMessage.textContent = messageText;
            // 将新留言添加到留言列表
            messageList.appendChild(newMessage);
            // 清空输入框
            messageInput.value = '';
          }
        }
    
        // 为提交按钮添加点击事件监听器
        submitButton.addEventListener('click', submitMessage);
      </script>
    
</body>
</html>